import { Layout, Menu, MenuProps } from 'antd';
import React from 'react';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { history } from 'umi';

const { Header, Footer, Sider, Content } = Layout;

const menuConfig = [{
  key: '1',
  icon: React.createElement(UserOutlined),
  label: '主页',
  handleClick: () => {
    history.push('/')
  }
}, {
  key: '2',
  icon: React.createElement(LaptopOutlined),
  label: '用户',
  handleClick: () => {
    history.push('/user')
  }
}, {
  key: '3',
  icon: React.createElement(NotificationOutlined),
  label: '圈子',
  handleClick: () => {
    history.push('/slave')
  }
}, {
  key: '4',
  icon: React.createElement(NotificationOutlined),
  label: '个人中心',
  handleClick: () => {
    history.push('/slave3')
  }
}, {
  key: '5',
  icon: React.createElement(NotificationOutlined),
  label: '个人信息',
  handleClick: () => {
    history.push('/info')
  }
}]

export default function (props: any) {
  const { children } = props 

  return (
    <>
      <Layout>
        <Header><div className="logo" /></Header>
        <Layout>
          <Sider>
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={['1']}
              items={menuConfig.map(
                (menuItem) => ({
                  key: menuItem.key,
                  icon: menuItem.icon,
                  label: menuItem.label,
                  onClick: menuItem.handleClick
                }),
              )}
            />
          </Sider>
          <Content style={{ padding: '0 50px' }}>
            {children}
          </Content>
        </Layout>
      </Layout>
    </>
  )
}
